<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list"></ul>

    <script>
        console.log(window.document.createDocumentFragment);
        /*
        var parent = document.querySelector(".list");
        for(var i=0; i<100000; i++){
            //创建li标签
            var li = document.createElement('li');
            //创建标签内部的文本
            var text = document.createTextNode(+i);

            //将创建的文本添加到li当中
            li.appendChild(text);
            parent.appendChild(li)


            // 这个效果 反复的操作DOM，不断进行重排重绘回流，浪费性能 效率低 页面卡死

        }*/


        //fragment
        var parent = document.querySelector(".list");

        // fragment 把所有的li都加入到虚拟元素内部，形成<fragment><li></li> 1000000</fragment>
        // 再将虚拟元素加入到ul当中   操作DOM就操作了1次
        var frag = document.createDocumentFragment();
        for (var i=0;i<50000;i++){
            var li = document.createElement('li');
            var text = document.createTextNode(+i);
            li.appendChild(text);
            frag.appendChild(li);
        }
        parent.appendChild(frag);




    </script>

</body>

</html>